<!DOCTYPE html>
<html>
    <head>
        <meta charset = "UTF-8">
        <title>Title</title>
        <style>
            * {
                margin:0;
                padding:0;
                text-align:center
            }
        </style>
        <script src = 'common.js'></script>
        <script>
            var students = [
                [1, '手机', 100, 'xx1.jpg'],
                [2, '电脑', 200, 'xx1.jpg'],
                [3, 'MP3', 300, 'xx1.jpg'],
                [4, '打印机', 400, 'xx1.jpg']
            ];

            //生成表格的方法
            var grid = function(title, col, data) {
                //表格的标题
                var p = $C('p');
                p.textContent = title;
                document.body.appendChild(p);

                //表格部分
                var g = $C('table');
                g.border = 1;
                g.style.margin = '0 auto';
                g.style.width = '80%';
                g.style.border = '1px solid #efefef';
                g.style.borderCollapse = 'collapse';
                document.body.appendChild(g);

                //表格的列头
                var tr = $C('tr');
                g.appendChild(tr);
                for (var i = 0; i < col.length; i++) {
                    var th = $C('th');
                    th.style.width = '25%';
                    th.textContent = col[i];
                    tr.appendChild(th);
                }

                //表格数据展示
                for (var i = 0; i < data.length; i++) {
                    //新建tr元素
                    var tr = $C('tr');
                    g.appendChild(tr);

                    //填充表格的数据展示
                    var arr = data[i];//['张三', '0', 21, '../../xx1.png']
                    for (var j = 0; j < arr.length; j++) {
                        var td = $C('td');
                        //第2列
                        /*if (1 == j) {
                            //为0给td设置男, 1设置女
                            if (0 == arr[j]) {
                                td.textContent = '男';
                            } else if (1 == arr[j]) {
                                td.textContent = '女';
                            }
                        } else */if (3 == j) {//第4列
                            td.style.cursor = 'pointer';
                            td.textContent = '查看';
                            td.setAttribute('path', arr[j]);//设置属性 属性名称 - 属性内容
                            td.onclick = function() {
                                //生成图片对象并且指定图片地址
                                var img = $C('img');
                                img.src = this.getAttribute('path');//访问属性
                                img.style.width = 280 + 'px';
                                img.style.height = 180 + 'px';
                                //调用窗口方法,将图片对象传递给窗口
                                win(300, 240, '大头照', img);
                            };
                        } else {
                            //非第2列
                            td.textContent = arr[j];
                        }

                        tr.appendChild(td);
                    }
                }
            };

            window.onload = function() {
                grid('商品信息', ['序号', '商品名称', '价格', '照片'], students);
            };
        </script>
    </head>

    <body>
            <!--<tr>
                <th>姓名</th>
                <th>性别</th>
                <th>年龄</th>
                <th>照片</th>
            </tr>
            <tr>
                <td>张三</td>
                <td>男</td>
                <td>23</td>
                <td><span style = 'cursor:pointer'>查看</span></td>
            </tr>
            <tr>
                <td>李四</td>
                <td>女</td>
                <td>21</td>
                <td><span style = 'cursor:pointer'>查看</span></td>
            </tr>-->
    </body>
</html>

